<script setup>
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import instance from "../until/request.js";

const router = useRouter()
let registerUser = reactive({
  username: '',
  userPwd: ''
})
let usernameMsg = ref('')
let userPwdMsg = ref('')
let reUserPwdMsg = ref('')
let reUserPwd = ref('')

async function checkUsername() {
  // 直接请求后端端口，此时后端已允许跨域
  let {data} = await instance.get(`/user/checkUsernameUsed?username=${registerUser.username}`)
  if (data.code != 200) {
    usernameMsg.value = "用户名占用"
    return false
  }
  usernameMsg.value = "可用"
  return true
}


function checkUserPwd() {
  let userPwdReg = /^[0-9]{6}$/
  if (!userPwdReg.test(registerUser.userPwd)) {
    userPwdMsg.value = "格式有误"
    return false
  }
  userPwdMsg.value = "OK"
  return true
}

function checkReUserPwd() {
  let userPwdReg = /^[0-9]{6}$/
  if (!userPwdReg.test(reUserPwd.value)) {
    reUserPwdMsg.value = "格式有误"
    return false
  }
  if (registerUser.userPwd != reUserPwd.value) {
    reUserPwdMsg.value = "两次密码不一致"
    return false
  } // 添加这行代码来设置验证通过的消息
  reUserPwdMsg.value = "OK"
  return true
}
// 注册的方法
async function register() {
  // 校验所有的输入框是否合法
  let flag1 = await checkUsername()
  if (flag1) {
    let {data} = await instance.post("user/register", registerUser)
    if (data.code === 200) {
      // 注册成功跳转 登录页
      alert("注册成功,快去登录吧")
      await router.push("/login")
    } else {
      alert("抱歉,用户名被抢注了")
    }
  } else {
    alert("校验不通过,请求再次检查数据")
  }
}
</script>

<template>

  <div class="container">
    <div id="registerForm">
      <h2>用户注册</h2>

      <div class="form-group">
        <label for="registerUsername">用户名:</label>
        <input type="text" id="registerUsername" name="username" required v-model="registerUser.username"
               @blur="checkUsername">
        <span>{{ usernameMsg }}</span>
      </div>

      <div class="form-group">
        <label for="registerPassword">密码:</label>
        <input type="password" id="registerPassword" name="password" v-model="registerUser.userPwd" @blur="checkUserPwd"  required>
        <span id="checkPassword">{{userPwdMsg}}</span>
      </div>
      <div class="form-group">
        <label for="confirmPassword">确认密码:</label>
        <input type="password" id="confirmPassword" name="confirmPassword" v-model="reUserPwd" @blur="checkReUserPwd" required>
        <span id="checkConfirmPassword">{{reUserPwdMsg}}</span>
      </div>
      <button type="submit" @click="register">注册</button>

      <div class="switch-form">
        已有账户?
        <router-link to="/login">立即登录</router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
  margin: 0 auto;
}

h2 {
  text-align: center;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #333;
}

input[type="text"], input[type="password"], input[type="email"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.switch-form {
  text-align: center;
  margin-top: 15px;
}

.switch-form a {
  color: #007bff;
  text-decoration: none;
}

.switch-form a:hover {
  text-decoration: underline;
}
</style>